﻿@{
    ViewBag.Title = "Homestay Website";
    //ViewContext.Controller.ViewBag.txtinput = 2;
    var checkInput = ViewBag.txtSearch;
    var tmptxtsearch = "";
}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="../../Content/Styles/bubble.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../Content/Styles/Masterpage/searchform.css">
    <link rel="stylesheet" type="text/css" href="../../Content/Styles/Masterpage/style.css">
    <link rel="stylesheet" type="text/css" href="../../Content/Styles/Masterpage/site.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   
    <script src="../../Scripts/dialog.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <script src="../../Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.corner.js" type="text/javascript"></script>
    @* Hoangdx - Begin Upload Image Script *@
    <link href="/Content/Bootstrap/bootstrap.min.css?cdv=1" type="text/css" rel="stylesheet" />
    <link href="/Content/Bootstrap/bootstrap-responsive.min.css?cdv=1" type="text/css"
        rel="stylesheet" />
    <link href="/Content/Bootstrap/bootstrap-image-gallery.min.css?cdv=1" type="text/css"
        rel="stylesheet" />
    <link href="/Content/FileUpload/jquery.fileupload-ui.css?cdv=1" type="text/css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.8.2.min.js?cdv=1" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.24.min.js?cdv=1" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
   </script>
    @* Hoangdx - End Upload Image Script *@ @*  sript for back to top*@
    <script type="text/javascript">
        // Assuming jQuery.noConflict(); has been called
        jQuery(function () {
            jQuery(document).ready(function () {
                jQuery("#back-top").hide();
                jQuery(function () {
                    jQuery(window).scroll(function () {
                        if (jQuery(this).scrollTop() > 200) {
                            jQuery('#back-top').fadeIn('slow');
                        } else {
                            jQuery('#back-top').fadeOut('slow');
                        }
                    });
                    jQuery('#back-top a').click(function () {
                        jQuery('body,html').animate({
                            scrollTop: 0
                        }, 1300);
                        return false;
                    });
                });
            });
        });
    </script>
    @*script for map*@ @*    script for dialog*@
    <script type="text/javascript">
        //hàm mở dialog
        function show() {
            Dialog.Set(null, "#dialog", "#dialog_nen", '450', '250');
            //hiển thị hình nền		
            $("#dialog_nen").fadeIn(500);
            //hiển thị dialog
            $("#dialog").fadeIn(500);
        }
    </script>
    <script type="text/javascript">
        $(function () {
                var txtsearchinput = "";
            var tmptxtsearchinput = "";
            $("#buttonwrapper").click(function () {
                var checktxt = false;
                txtsearchinput = $("#inputWrapper").val();
                var txtsearch = "";
                if (txtsearchinput != "") {
                    var listaddress = @Html.Raw(Json.Encode(HttpContext.Current.Session["Data"]));
                    if (listaddress!=null) {
                        for (var i = 0; i < listaddress.length; i++) {
                            if (txtsearchinput == listaddress[i]) {
                                checktxt = true;
                                break;
                            }
                        }
                    }
                    if (checktxt == true) {
                        txtsearch = txtsearchinput;
                    } else {
                        tmptxtsearchinput = $(".ui-menu-item:first").text();
                        if (tmptxtsearchinput != "") {
                            txtsearch = tmptxtsearchinput;
                        }else {
                            if (txtsearchinput == sessionStorage.test2) {
                                txtsearch = sessionStorage.test;
                            } else {
                                txtsearch = txtsearchinput;
                            }
                        }
                        sessionStorage.test = txtsearch;
                        sessionStorage.test2 = txtsearchinput;
                    }
                    // txtinput = txtsearchinput;
                    // window.document.getElementById('inputWrapper').value=txtsearchinput;
                    sessionStorage.txtInputSearch = txtsearchinput;
                    var check = window.location.pathname;
                    if (check == "/Search/Index") {
                        $.ajax({
                            url: "/Search/SearchText",
                            type: 'POST',
                            data: { txtSearch: txtsearch },
                            success: function (response) {
                                $("#resultbox").html(response);
                            }

                        });
                    } else {
                        window.location.href = "/Search/Index?province=0&district=0&txtsearch=" + txtsearch ;
                    
                    }     
                } else {
                    alert("please input your destination!");
                }
                
                
            });
            if ("@checkInput" != ""){
                window.document.getElementById('inputWrapper').value = sessionStorage.txtInputSearch;
            } else {
                window.document.getElementById('inputWrapper').value = "";
            }
            
           
            
            
        });
    </script>
    <script type="text/javascript">
        $(function () {
            var names = new Array();
            var array = @Html.Raw(Json.Encode(HttpContext.Current.Session["Data"]));
            if (array != null) {
            
                for( var i = 0; i < array.length; i++) {
                    names[i] = array[i];
                }
                var accentMap = {
                    "á":"a", "à":"a", "ả":"a", "ã":"a", "ạ":"a",
                    "â":"a", "ấ":"a", "ầ":"a", "ẩ":"a", "ẫ":"a", "ậ":"a",
                    "ă":"a", "ắ":"a", "ằ":"a", "ẳ":"a", "ẵ":"a", "ặ":"a",  
                    "đ":"d", "Đ":"D", 
                    "é":"e","è":"e","ẻ":"e","ẽ":"e","ẹ":"e","ê":"e",
                    "ế":"e","ề":"e","ể":"e","ễ":"e","ệ":"e",  
                    "í":"i","ì":"i","ỉ":"i","ĩ":"i","ị":"i",  
                    "ó":"o","ò":"o","ỏ":"o","õ":"o","ọ":"o",
                    "ô":"o","ố":"o","ồ":"o","ổ":"o","ỗ":"o","ộ":"o",
                    "ơ":"o","ớ":"o","ờ":"o","ở":"o","ỡ":"o","ợ":"o",  
                    "ú":"u","ù":"u","ủ":"u","ũ":"u","ụ":"u",
                    "ư":"u","ứ":"u","ừ":"u","ử":"u","ữ":"u","ự":"u",  
                    "ý":"y","ỳ":"y","ỷ":"y","ỹ":"y","ỵ":"y"
                };
                var normalize = function (term) {
                    var ret = "";
                    for (var i = 0; i < term.length; i++) {
                        ret += accentMap[term.charAt(i)] || term.charAt(i);
                    }
                    return ret;
                };
                $("#inputWrapper").autocomplete({
                    source: function (request, response) {
                        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                        response($.grep(names, function (value) {
                            value = value.label || value.value || value;
                            return matcher.test(value) || matcher.test(normalize(value));
                        }).slice(0,10));
                    }, 
                });
            }
        
        });
         
    </script>

    <style type="text/css">
        .loginstyle
        {
            margin: 1px;
            color: white;
            padding: 3px 10px;
            cursor: pointer;
            position: relative;
            background-color: #35ABBB;
            height: 22px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 13px;
        }
    </style>
</head>
    <body>
         <div id="boxes">
        <div id="dialog">
        </div>
        <div id="dialog_nen" style="background-color: rgba(51,43,46,0.7);">
        </div>
    </div>
        <div id="wrapbody">
            <div id="wrap">
                <div id="header">
                    @if (HttpContext.Current.Session["username"] != null)
                    {
                        <div class="logoutItem" style="float: right; margin-right: 30px; display: block">
                            <div class="loginstyle">
                                @Html.ActionLink("Log Out", "LogOff", "Users")
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="login" style="float: right; position: absolute; right: 15px; top: 12px;"
                             id="loginItem">
                            <div class="loginstyle" style="float: left">
                                @Ajax.ActionLink("Login", "Login", "UserRoles", new AjaxOptions() { UpdateTargetId = "dialog", HttpMethod = "Get", OnSuccess = "show()" })
                            </div>
                            <div class="loginstyle" style="float: left">
                                @Ajax.ActionLink("Register", "Register", "Users", new AjaxOptions() { UpdateTargetId = "dialog", HttpMethod = "Get", OnSuccess = "show()" })
                            </div>
                        </div>
                    }
                    <div class="loginstyle" style="float: left; display: none">
                                @Ajax.ActionLink("Forgotpassword", "Forgotpassword", "Users", new AjaxOptions() { UpdateTargetId = "dialog", HttpMethod = "Get", OnSuccess = "show()" })
                            </div>
                    <div id="textbox-search" class="form-wrapper cf">
                        <input type="text" placeholder="Where are you going?" id="inputWrapper" />
                        <input type="submit" id="buttonwrapper" value="Search "></input>
                    </div>
                    <div id="menu">
                        @if (HttpContext.Current.Session["username"] != null)
                        {
                            <div class="item" style="display: block;" id="accountItem" >
                                <a class="link icon_account"></a>
                                <div class="item_content" style="display: block">
                                    <h2 id="usernamedisplay">
                                        Hi! @HttpContext.Current.Session["username"].ToString()</h2>
                                    <p>
                                        <a href="/Wishlists/ViewWishList">My Wishlists</a>
                                         <a href="/Users/MyAccount">My Account</a>
                                        <a href="/Posts/ViewMyPosts">My Posts  </a>
                                    </p>
                                </div>
                            </div>
                       
                        }
                        <div class="item" style="display: block; max-width: 168px!important" id="postItem">
                            <a class="link icon_post" href="/Posts/CreateStep1">
                                <div class="item_content" style="display: block">
                                    <h2>
                                        Create Post</h2>
                                </div>
                            </a>
                        </div>
                        <div class="item" style="display: block; max-width: 128px!important">
                            @*                        <a class="link icon_search" href="/Search/Index?province=0&district=0">*@
                            <a class="link icon_search" href="/Search/Index">
                                <div class="item_content" style="display: block">
                                    <h2>
                                        Search</h2>
                                </div>
                            </a>
                        </div>
                        <div class="item" style="display: block; max-width: 185px!important">
                            <a class="link icon_news" href="/News/News">
                                <div class="item_content" style="display: block">
                                    <h2>
                                        Travel information</h2>
                                </div>
                            </a>
                        </div>
                        <div class="item" style="display: block; max-width: 118px!important">
                            <a class="link icon_home" href="/Home/Index">
                                <div class="item_content" style="display: block">
                                    <h2>
                                        Home</h2>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="container" class="rounded-corners">
                    @RenderBody()
                    <p id="back-top">
                        <a href="#header">&uarr;</a></p>
                </div>
                <div id="footer" style="text-align:center">
                    <p style="color:white; padding-top:30px;">Contact to us via email : 
                    <a href="mailto:homestaywebcp@gmail.com?Subject=Message%20to%20HomestayWebsite" target="_blank">homestaywebcp@gmail.com</a></p>
                </div>
            </div>
        </div>
   
    
        <script>
            $('.item').hover(
                function () {
                    var $this = $(this);
                    expand($this);
                },
                function () {
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem) {
                var angle = 0;
                var t = setInterval(function () {
                    if (angle == 1440) {
                        clearInterval(t);
                        return;
                    }
                    angle += 40;
                    $('.link', $elem).stop().animate({ rotate: '+=-40deg' }, 0);
                }, 10);
                $elem.stop().animate({ width: '268px' }, 1000)
                    .find('.item_content').fadeIn(400, function () {
                        $(this).find('p').stop(true, true).fadeIn(600);
                    });
            }
            function collapse($elem) {
                var angle = 1440;
                var t = setInterval(function () {
                    if (angle == 0) {
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $('.link', $elem).stop().animate({ rotate: '+=40deg' }, 0);
                }, 10);
                $elem.stop().animate({ width: '52px' }, 1000)
                    .find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
            }
        </script>
    </body>
</html>
